<template>
	<!-- 购物 -->
	<view class="">
		<view class="searchBar">
			<view class="searBar-box">
				<image src="../../static/搜索.png" mode="aspectFill" />
				<input type="text" name="searchBar" placeholder="大家都在搜索" bindtap="toSearch" />
			</view>
			<view class="shop">
				<image @click="goOne" src="../../static/购物车3.png" mode=""></image>
				<image @click="goOnes" src="../../static/订单.png" mode=""></image>
				<image src="../../static/更多.png" mode=""></image>
			</view>
		</view>
		<view class="content">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay>
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-itme">
							<image :src="item.content" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="shopp">
			<view class="box">
				<view class="sigle-title">
					<image src="../../static/压缩毛巾.png" mode="aspectFit"></image>
					<text>压缩毛巾</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/口水巾.png" mode="aspectFit"></image>
					<text>口水巾</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/围巾.png" mode="aspectFit"></image>
					<text>围巾</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/口罩.png" mode="aspectFit"></image>
					<text>口罩</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/帽子.png" mode="aspectFit"></image>
					<text>帽子</text>
				</view>
			</view>
			<view class="box">
				<view class="sigle-title">
					<image src="../../static/柔巾.png" mode="aspectFit"></image>
					<text>柔巾</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/浴巾.png" mode="aspectFit"></image>
					<text>浴巾</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/美容棉签.png" mode="aspectFit"></image>
					<text>美容棉签</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/面膜.png" mode="aspectFit"></image>
					<text>面膜</text>
				</view>
				<view class="sigle-title">
					<image src="../../static/床品.png" mode="aspectFit"></image>
					<text>床品</text>
				</view>
			</view>
		</view>
		<view class="box1">
			<view class="tax" v-for="item in spData">
				<view>
					<image :src="item.spimg" mode="widthFix"></image>
					<text>{{item.spname}}</text>
					<p>￥{{item.money}}</p>
				</view>
				<view @click="goTwo">
					<image :src="item.spimg2" mode="widthFix"></image>
					<text>{{item.spname2}}</text>
					<p>￥{{item.money2}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
						content: '../../static/1.jpg'
					},
					{
						content: '../../static/2.jpg'
					},
					{
						content: '../../static/3.jpg'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'dot',
				spData:[
					{
						spimg:'../../static/ww1.jpg',
						spname:'简黛 . 果酸烟酰胺沐浴露保湿香体滋润持久留香家',
						money:28,
						spimg2:'../../static/ww2.jpg',
						spname2:'吾禾 . 日系富士山INS和风美瞳盒莫兰迪色系隐形眼',
						money2:9.9
					},
					{
						spimg:'../../static/ww3.jpg',
						spname:'仙蒂奈儿 · 固体香膏持久留香淡香女士学生平价小',
						money:9.9,
						spimg2:'../../static/ww4.jpg',
						spname2:'魔香 · 小苍兰洗发水控油蓬松去屑止痒洗头膏护发',
						money2:59
					},
					{
						spimg:'../../static/ww5.jpg',
						spname:'ROZO·少女清新持久淡香女士香水自然蜜桃香橙桂',
						money:23.5,
						spimg2:'../../static/ww6.jpg',
						spname2:'吾禾·潮酷棋盘格黑白简约cool美瞳盒潮系男女通用',
						money2:9.9
					},
					{
						spimg:'../../static/ww7.jpg',
						spname:'简黛·小众实验室香水沐浴露持久留香清爽补水男',
						money:29,
						spimg2:'../../static/ww8.jpg',
						spname2:'仙蒂奈儿·雕花口红套装丝绒哑光雾面不掉色送闺',
						money2:30.8
					},
					{
						spimg:'../../static/ww9.jpg',
						spname:'薇亦朦·茶香师香水试香',
						money:4,
						spimg2:'../../static/ww10.jpg',
						spname2:'NNUEDWE·正品粉饼定妆散蜜粉控油定妆持久防水',
						money2:38
					}
					
				]
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			goOne() {
				uni.navigateTo({
					url: "../shopping-cart/shopping-cart"
				})
			},
			goOnes() {
				uni.navigateTo({
					url: "../one/one"
				})
			},
			goTwo() {
				uni.navigateTo({
					url: "../else/else"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "shopping.scss"
</style>
// <style>
// 	page {
// 		background-color: #ffffff;
// 	}
// </style>
